<!DOCTYPE html>
<html
        layout:decorator="component/mainLayout"
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        lang="en" xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>订单结算</title>
</head>
<link rel="stylesheet" type="text/css" href="/layui/css/layui.css" media="all"/>
<script src="/layui/layui.js" charset="utf-8"></script>

<body layout:fragment="contentCenter" >

<fieldset class="layui-elem-field layui-field-title" style="margin: 20px 0;">
    <legend>订单结算</legend>
</fieldset>
<div id="orderTable">
        <table class="mdui-table mdui-table-selectable">
            <thead>
            <tr>
                <th>商品名称</th>
                <th>图片</th>
                <th class="">库存</th>
                <th class="">单价（元）</th>
                <th class="">购买数量</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(cargo,key) in cargoList">
                <input name="cargoId" :value="cargo.cargoId" type="hidden"/>
                <input name="cargoPrice" :value="cargo.cargoRetailPrice" type="hidden"/>
                <input name="cargoNum" :value="cargo.cargoNum" type="hidden"/>
                <td v-text="cargo.cargoName">旺旺雪饼</td>
                <td>
                    <img :src="cargo.cargoUrl" style="width: 80px"/>
                </td>
                <td v-text="cargo.cargoNum">999</td>
                <td v-text="cargo.cargoRetailPrice">5.6</td>
                <td>
                    <button class="layui-btn layui-btn-warm layui-btn-sm" @click="reducePrice(cargo.cargoId, key)">-</button>
                    <input type="text" style="width: 25px;text-align: center;"  v-model="cargo.buyNum" name="buyNum">
                    <button class="layui-btn layui-btn-normal layui-btn-sm" @click="calculatePrice(cargo.cargoId,key)">+</button>
                </td>
            </tr>
            </tbody>
        </table>
<div class="layui-row" style="font-size: 20px;right: 83px;top: 83px;position: fixed;background-color: lavender;">
    <div class="">
        <span style="font-weight: bold">订单总计：&nbsp;</span><span style="color: red;">{{totalAccount.toFixed(2)}}</span>&nbsp;&nbsp;元
        <button class="layui-btn layui-btn-primary" style="background-color: #009688;color: #ffffff;" @click="saveOrder()">提交订单</button>
    </div>
</div>
</div>
<script src="/mdui/js/mdui.js"></script>
<script src="/vue/vue.js"></script>
<script>
    $(document).ready(function () {
        sliderCollapse.open('#orderCollapse');
    })

    var layui = layui.use('layer', function(){
        var layer = layui.layer;
    });

    var vm = new Vue({
        el:'#orderTable',
        data:{
            orders:[
                {cargoId:125,buyNum:1,price:5},
                ],
            cargoList:[],
            totalAccount:0,
        },
        mounted:function(){
            this.$nextTick(function () {
                this.getCargoList();
            })
        },
        computed:{
        },
        watch:{

        },
        methods:{
            saveOrder:function () {
                if(this.totalAccount == 0){
                    layui.layer.alert("选择商品再下单",{icon:2});
                    return;
                }
                let order = {
                    totalAmount:this.totalAccount.toFixed(2),
                    orders:[]
                };
                $("table .mdui-table-row-selected").each(function (i,item) {
                    let cargoId = $(this).find("input[name=cargoId]").val();
                    let buyNum = $(this).find("input[name=buyNum]").val();
                    let cargoPrice = $(this).find("input[name=cargoPrice]").val();
                    let cargo = {
                        cargoId:cargoId,
                        buyNum:buyNum,
                        amount:buyNum*cargoPrice
                    }
                    order.orders.push(cargo);
                });
                $.ajax({
                    type: "POST",
                    data: {orderStr:JSON.stringify(order)},
                    url: "/order/makeOrder",
                    success: function (data) {
                        if (data.status===200){
                            layui.layer.alert("下单成功！", {icon: 1});
                            location.reload();
                        }else{
                            mdui.snackbar({
                                message: data.status===200?'下单成功':'下单失败,'+data.message,
                                buttonText: 'OK',
                                timeout:700,
                                onClose: function () {
                                }
                            });
                        }
                    },
                    error: function (request) {
                        mdui.snackbar({
                            message: '下单失败,未知错误',
                            buttonText: 'OK',
                        });
                    }
                });

            },
            calculatePrice:function (id, index) {
                let _this = this;
                _this.totalAccount = 0;
                _this.$set(_this.cargoList, index, Object.assign(_this.cargoList[index], {buyNum: _this.cargoList[index].buyNum + 1}));
                $("table .mdui-table-row-selected").each(function (i,item) {
                    let cargoId = $(this).find("input[name=cargoId]").val();
                    _this.cargoList.forEach(v=>{
                        if(v.cargoId == cargoId){
                            _this.totalAccount = _this.totalAccount + v.buyNum * v.cargoRetailPrice;
                        }
                    })
                })
            },
            reducePrice:function(id, index){
                let _this = this;
                _this.totalAccount = 0;
                _this.$set(_this.cargoList, index, Object.assign(_this.cargoList[index], {buyNum: _this.cargoList[index].buyNum - 1>=0?_this.cargoList[index].buyNum - 1:0}));
                $("table .mdui-table-row-selected").each(function (i,item) {
                    let cargoId = $(this).find("input[name=cargoId]").val();
                    _this.cargoList.forEach(v=>{
                        if(v.cargoId == cargoId){
                            _this.totalAccount = _this.totalAccount + v.buyNum * v.cargoRetailPrice;
                        }
                    })
                })

            },
            getCargoList(){
                let _this = this;
                $.ajax({
                    type: "POST",
                    async:false,
                    // data: {orderStr:JSON.stringify(order)},
                    url: "/cargoManager/getDetailCargo",
                    success: function (data) {
                        console.log(data);
                        if (data.status===200){
                            _this.cargoList = data.data;
                        }else{
                            mdui.snackbar({
                                message: data.status===200?'获取在售商品成功':'获取在售商品失败,'+data.message,
                                buttonText: 'OK',
                                timeout:700,
                                onClose: function () {
                                }
                            });
                        }
                    },
                    error: function (request) {
                        mdui.snackbar({
                            message: '获取在售商品失败,未知错误',
                            buttonText: 'OK',
                        });
                    }
                });
                // this.cargoList = [
                //     {cargoId:99999,cargoTitle:'你即使个天才',cargoPrice:4,cargoNum:299,buyNum:0,cargoPic:'/image/girl.jpg'},
                //     {cargoId:88888,cargoTitle:'你即使个天才',cargoPrice:2.5,cargoNum:299,buyNum:0,cargoPic:'/image/girl.jpg'},
                //     {cargoId:55555,cargoTitle:'你即使个天才',cargoPrice:5,cargoNum:299,buyNum:0,cargoPic:'/image/girl.jpg'},
                // ];
            }
        }


    })

</script>
<script src="/mdui/js/mdui.js"></script>

</body>
</html>